<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>表格 | BuildAdmin</title>
    <meta name="generator" content="VuePress 1.9.7">
    <link rel="icon" href="/images/favicon.ico">
    <meta name="description" content="使用流行技术栈快速创建商业级后台管理系统-BuildAdmin是基于TP6、Vue3.x、Typescript、Vite、Pinia、Element plus等的开源后台系统">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="keywords" content="BuildAdmin,ThinkPHP6通用后台,Vue3后台,BuildAdmin文档,vue3开源后台,vue3模板与案例市场">
    <meta name="author" content="妙码生花">
    <meta name="robots" content="all,follow">
    
    <link rel="preload" href="/assets/css/0.styles.76db4400.css" as="style"><link rel="preload" href="/assets/js/app.26dfc26f.js" as="script"><link rel="preload" href="/assets/js/2.845fc4bd.js" as="script"><link rel="preload" href="/assets/js/71.9e222b70.js" as="script"><link rel="prefetch" href="/assets/js/10.31502a42.js"><link rel="prefetch" href="/assets/js/11.c0667200.js"><link rel="prefetch" href="/assets/js/12.0022daab.js"><link rel="prefetch" href="/assets/js/13.496b9007.js"><link rel="prefetch" href="/assets/js/14.57a77bc0.js"><link rel="prefetch" href="/assets/js/15.a2ee4fc7.js"><link rel="prefetch" href="/assets/js/16.7050523a.js"><link rel="prefetch" href="/assets/js/17.c4c5529f.js"><link rel="prefetch" href="/assets/js/18.f0350247.js"><link rel="prefetch" href="/assets/js/19.60586b14.js"><link rel="prefetch" href="/assets/js/20.4c6361b4.js"><link rel="prefetch" href="/assets/js/21.f793d386.js"><link rel="prefetch" href="/assets/js/22.299fa3b0.js"><link rel="prefetch" href="/assets/js/23.460af9b1.js"><link rel="prefetch" href="/assets/js/24.67771dfc.js"><link rel="prefetch" href="/assets/js/25.57b0bfa7.js"><link rel="prefetch" href="/assets/js/26.30e9faee.js"><link rel="prefetch" href="/assets/js/27.15ffda62.js"><link rel="prefetch" href="/assets/js/28.4ca46604.js"><link rel="prefetch" href="/assets/js/29.09a58cb6.js"><link rel="prefetch" href="/assets/js/3.959fd4f8.js"><link rel="prefetch" href="/assets/js/30.c53f15cb.js"><link rel="prefetch" href="/assets/js/31.0d30028e.js"><link rel="prefetch" href="/assets/js/32.4591b41b.js"><link rel="prefetch" href="/assets/js/33.bd9ed146.js"><link rel="prefetch" href="/assets/js/34.0bedaafb.js"><link rel="prefetch" href="/assets/js/35.dded2c4a.js"><link rel="prefetch" href="/assets/js/36.3f14f7ef.js"><link rel="prefetch" href="/assets/js/37.348ab3dc.js"><link rel="prefetch" href="/assets/js/38.bea67b35.js"><link rel="prefetch" href="/assets/js/39.66735bad.js"><link rel="prefetch" href="/assets/js/4.a7dad9f3.js"><link rel="prefetch" href="/assets/js/40.24ae817d.js"><link rel="prefetch" href="/assets/js/41.20484420.js"><link rel="prefetch" href="/assets/js/42.d2d9cf07.js"><link rel="prefetch" href="/assets/js/43.638926f9.js"><link rel="prefetch" href="/assets/js/44.5b2e8865.js"><link rel="prefetch" href="/assets/js/45.b08599e3.js"><link rel="prefetch" href="/assets/js/46.3e165b3e.js"><link rel="prefetch" href="/assets/js/47.0f981d94.js"><link rel="prefetch" href="/assets/js/48.52c21e5e.js"><link rel="prefetch" href="/assets/js/49.5d5d4c94.js"><link rel="prefetch" href="/assets/js/5.2d6b30a8.js"><link rel="prefetch" href="/assets/js/50.379ba4f0.js"><link rel="prefetch" href="/assets/js/51.4f4ecaea.js"><link rel="prefetch" href="/assets/js/52.81ccb047.js"><link rel="prefetch" href="/assets/js/53.419686cb.js"><link rel="prefetch" href="/assets/js/54.783cb319.js"><link rel="prefetch" href="/assets/js/55.110fde12.js"><link rel="prefetch" href="/assets/js/56.53900e45.js"><link rel="prefetch" href="/assets/js/57.55cd3551.js"><link rel="prefetch" href="/assets/js/58.2b82c178.js"><link rel="prefetch" href="/assets/js/59.fec4fe12.js"><link rel="prefetch" href="/assets/js/6.4e9a5a2e.js"><link rel="prefetch" href="/assets/js/60.99354f6f.js"><link rel="prefetch" href="/assets/js/61.c528c138.js"><link rel="prefetch" href="/assets/js/62.831c810e.js"><link rel="prefetch" href="/assets/js/63.9923d5c6.js"><link rel="prefetch" href="/assets/js/64.01b9c0fd.js"><link rel="prefetch" href="/assets/js/65.1288d968.js"><link rel="prefetch" href="/assets/js/66.f7c8aabd.js"><link rel="prefetch" href="/assets/js/67.89455afa.js"><link rel="prefetch" href="/assets/js/68.ca185a9e.js"><link rel="prefetch" href="/assets/js/69.dfe2288f.js"><link rel="prefetch" href="/assets/js/7.58476ce6.js"><link rel="prefetch" href="/assets/js/70.ea823c37.js"><link rel="prefetch" href="/assets/js/72.77b15e17.js"><link rel="prefetch" href="/assets/js/73.f42962da.js"><link rel="prefetch" href="/assets/js/74.a2912f27.js"><link rel="prefetch" href="/assets/js/75.8db3af79.js"><link rel="prefetch" href="/assets/js/76.45426b7e.js"><link rel="prefetch" href="/assets/js/77.a5d8ef7a.js"><link rel="prefetch" href="/assets/js/78.cfcdd83a.js"><link rel="prefetch" href="/assets/js/79.d8b5e327.js"><link rel="prefetch" href="/assets/js/8.419e773f.js"><link rel="prefetch" href="/assets/js/80.a64f0503.js"><link rel="prefetch" href="/assets/js/9.633ba216.js">
    <link rel="stylesheet" href="/assets/css/0.styles.76db4400.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container max-content"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/" class="home-link router-link-active"><img src="/images/logo.png" alt="BuildAdmin" class="logo"> <span class="site-name can-hide">BuildAdmin</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/guide/" class="nav-link">
  指南
</a></div><div class="nav-item"><a href="/senior/" class="nav-link router-link-active">
  进阶
</a></div><div class="nav-item"><a href="https://buildadmin.com" target="_blank" rel="noopener noreferrer" class="nav-link external">
  官网
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://demo.buildadmin.com" target="_blank" rel="noopener noreferrer" class="nav-link external">
  线上演示
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="代码仓库" class="dropdown-title"><span class="title">代码仓库</span> <span class="arrow down"></span></button> <button type="button" aria-label="代码仓库" class="mobile-dropdown-title"><span class="title">代码仓库</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="https://gitee.com/wonderful-code/buildadmin" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Gitee
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://github.com/build-admin/buildadmin" target="_blank" rel="noopener noreferrer" class="nav-link external">
  GitHub
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></div></div><div class="nav-item"><a href="/fastadmin.html" class="nav-link">
  🎉FastAdmin
</a></div><div class="nav-item"><a href="https://gitee.com/wonderful-code/buildadmin/blob/master/CHANGELOG.md" target="_blank" rel="noopener noreferrer" class="nav-link external">
  更新日志
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <a href="https://gitee.com/wonderful-code/build-admin-doc" target="_blank" rel="noopener noreferrer" class="repo-link">
    文档仓库
    <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/guide/" class="nav-link">
  指南
</a></div><div class="nav-item"><a href="/senior/" class="nav-link router-link-active">
  进阶
</a></div><div class="nav-item"><a href="https://buildadmin.com" target="_blank" rel="noopener noreferrer" class="nav-link external">
  官网
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://demo.buildadmin.com" target="_blank" rel="noopener noreferrer" class="nav-link external">
  线上演示
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="代码仓库" class="dropdown-title"><span class="title">代码仓库</span> <span class="arrow down"></span></button> <button type="button" aria-label="代码仓库" class="mobile-dropdown-title"><span class="title">代码仓库</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="https://gitee.com/wonderful-code/buildadmin" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Gitee
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://github.com/build-admin/buildadmin" target="_blank" rel="noopener noreferrer" class="nav-link external">
  GitHub
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></div></div><div class="nav-item"><a href="/fastadmin.html" class="nav-link">
  🎉FastAdmin
</a></div><div class="nav-item"><a href="https://gitee.com/wonderful-code/buildadmin/blob/master/CHANGELOG.md" target="_blank" rel="noopener noreferrer" class="nav-link external">
  更新日志
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <a href="https://gitee.com/wonderful-code/build-admin-doc" target="_blank" rel="noopener noreferrer" class="repo-link">
    文档仓库
    <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav>  <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>起步</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/senior/" aria-current="page" class="sidebar-link">后台交互</a></li><li><a href="/senior/directoryStructure.html" class="sidebar-link">目录结构</a></li><li><a href="/senior/oneClickCRUD.html" class="sidebar-link">CRUD代码生成</a></li><li><a href="/senior/databaseSpecification.html" class="sidebar-link">数据表设计规范</a></li><li><a href="/senior/multilingual.html" class="sidebar-link">国际化（多语言）</a></li><li><a href="/senior/addMenuRule.html" class="sidebar-link">菜单规则（路由与权限）</a></li><li><a href="/senior/faq.html" class="sidebar-link">常见问题</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>WEB端专项</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/senior/web/icon.html" class="sidebar-link">字体图标</a></li><li><a href="/senior/web/axios.html" class="sidebar-link">网络请求</a></li><li><a href="/senior/web/stores.html" class="sidebar-link">状态管理</a></li><li><a href="/senior/web/formItem.html" class="sidebar-link">表单项目组件（formItem）</a></li><li><a href="/senior/web/baInput.html" class="sidebar-link">输入组件（baInput）</a></li><li><a href="/senior/web/baTable.html" aria-current="page" class="active sidebar-link">表格组件（table）</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/senior/web/baTable.html#table-组件" class="sidebar-link">Table 组件</a></li><li class="sidebar-sub-header"><a href="/senior/web/baTable.html#batable-类" class="sidebar-link">baTable 类</a></li><li class="sidebar-sub-header"><a href="/senior/web/baTable.html#表格列" class="sidebar-link">表格列</a></li><li class="sidebar-sub-header"><a href="/senior/web/baTable.html#自定义单元格渲染" class="sidebar-link">自定义单元格渲染</a></li><li class="sidebar-sub-header"><a href="/senior/web/baTable.html#自定义表格顶部按钮" class="sidebar-link">自定义表格顶部按钮</a></li><li class="sidebar-sub-header"><a href="/senior/web/baTable.html#自定义表格行侧边按钮" class="sidebar-link">自定义表格行侧边按钮</a></li><li class="sidebar-sub-header"><a href="/senior/web/baTable.html#深度使用表格-重要" class="sidebar-link">深度使用表格（重要）</a></li><li class="sidebar-sub-header"><a href="/senior/web/baTable.html#表格所有可用属性" class="sidebar-link">表格所有可用属性</a></li><li class="sidebar-sub-header"><a href="/senior/web/baTable.html#表格公共搜索" class="sidebar-link">表格公共搜索</a></li><li class="sidebar-sub-header"><a href="/senior/web/baTable.html#batableapi-类" class="sidebar-link">baTableApi 类</a></li><li class="sidebar-sub-header"><a href="/senior/web/baTable.html#表格顶部菜单" class="sidebar-link">表格顶部菜单</a></li><li class="sidebar-sub-header"><a href="/senior/web/baTable.html#常见问题" class="sidebar-link">常见问题</a></li></ul></li><li><a href="/senior/web/terminal.html" class="sidebar-link">WEB终端组件</a></li><li><a href="/senior/web/formValidation.html" class="sidebar-link">表单验证</a></li><li><a href="/senior/web/directives.html" class="sidebar-link">内置指令</a></li><li><a href="/senior/web/utils.html" class="sidebar-link">辅助工具/函数</a></li><li><a href="/senior/web/styles.html" class="sidebar-link">CSS/SCSS样式</a></li><li><a href="/senior/web/justNeedWeb.html" class="sidebar-link">只需要WEB端</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>WebNuxt专项（SSR）</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/senior/nuxt/intro.html" class="sidebar-link">介绍</a></li><li><a href="/senior/nuxt/directoryStructure.html" class="sidebar-link">目录结构</a></li><li><a href="/senior/nuxt/request.html" class="sidebar-link">网络请求</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>Server端专项</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/senior/server/debug.html" class="sidebar-link">开启调试</a></li><li><a href="/senior/server/apiDebug.html" class="sidebar-link">调试接口</a></li><li><a href="/senior/server/config.html" class="sidebar-link">配置</a></li><li><a href="/senior/server/controller.html" class="sidebar-link">控制器</a></li><li><a href="/senior/server/captcha.html" class="sidebar-link">验证码</a></li><li><a href="/senior/server/dataLImit.html" class="sidebar-link">数据权限控制</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>模块开发</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/senior/module/start.html" class="sidebar-link">开始</a></li><li><a href="/senior/module/basicInfo.html" class="sidebar-link">模块基本信息</a></li><li><a href="/senior/module/directoryStructure.html" class="sidebar-link">模块目录结构</a></li><li><a href="/senior/module/configJson.html" class="sidebar-link">模块基本配置</a></li><li><a href="/senior/module/installSql.html" class="sidebar-link">模块安装SQL</a></li><li><a href="/senior/module/coreController.html" class="sidebar-link">模块核心控制器</a></li><li><a href="/senior/module/event.html" class="sidebar-link">模块行为事件</a></li><li><a href="/senior/module/webBootstrap.html" class="sidebar-link">向 main.ts 插入代码</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="表格"><a href="#表格" class="header-anchor">#</a> 表格</h1> <p>我们封装了<code>Table</code>组件、<code>baTable</code>类、<code>baTableApi</code>类、<code>表格顶部菜单</code>组件等，以方便快速生成和制作表格。</p> <h2 id="table-组件"><a href="#table-组件" class="header-anchor">#</a> Table 组件</h2> <p><code>Table</code>组件位于<code>\src\components\table</code>，我们基于<code>el-table</code>封装了该组件，所以<a href="https://element-plus.gitee.io/zh-CN/component/table.html" target="_blank" rel="noopener noreferrer">el-table<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>的所有事件属性都是可以直接在<code>Table</code>组件上使用的，部分属性可能失效，比如<code>el-table</code>的<code>size</code>，这是因为<code>Table</code>组件拥有一些默认的<code>css</code>样式。</p> <h4 id="table-组件属性"><a href="#table-组件属性" class="header-anchor">#</a> Table 组件属性</h4> <p>我们在<a href="https://element-plus.gitee.io/zh-CN/component/table.html#table-%E5%B1%9E%E6%80%A7" target="_blank" rel="noopener noreferrer">el-table<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>的属性基础上增加了以下属性</p> <table><thead><tr><th style="text-align:center;">属性名</th> <th style="text-align:center;">注释</th> <th style="text-align:center;">值</th></tr></thead> <tbody><tr><td style="text-align:center;">pagination</td> <td style="text-align:center;">是否显示底部分页组件</td> <td style="text-align:center;">boolean</td></tr></tbody></table> <h4 id="table-组件方法"><a href="#table-组件方法" class="header-anchor">#</a> Table 组件方法</h4> <table><thead><tr><th style="text-align:center;">方法名</th> <th style="text-align:center;">注释</th> <th style="text-align:center;">参数</th></tr></thead> <tbody><tr><td style="text-align:center;">getRef</td> <td style="text-align:center;">获取内部<code>el-table</code>的<code>ref</code>，然后就可以使用<a href="https://element-plus.gitee.io/zh-CN/component/table.html#table-%E6%96%B9%E6%B3%95" target="_blank" rel="noopener noreferrer">el-table<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>的所有方法</td> <td style="text-align:center;">-</td></tr></tbody></table> <h4 id="table-组件插槽"><a href="#table-组件插槽" class="header-anchor">#</a> Table 组件插槽</h4> <table><thead><tr><th style="text-align:center;">插槽名</th> <th style="text-align:center;">注释</th> <th style="text-align:center;">子标签</th></tr></thead> <tbody><tr><td style="text-align:center;">neck</td> <td style="text-align:center;">表格头与表格主体中间区域</td> <td style="text-align:center;">任意</td></tr> <tr><td style="text-align:center;">columnPrepend</td> <td style="text-align:center;">通过此插槽在<code>baTable</code>类中定义的列之前插入列</td> <td style="text-align:center;">el-table-column</td></tr> <tr><td style="text-align:center;">columnAppend</td> <td style="text-align:center;">通过此插槽在<code>baTable</code>类中定义的列之后插入列</td> <td style="text-align:center;">el-table-column</td></tr> <tr><td style="text-align:center;">footer</td> <td style="text-align:center;">表格底部区域</td> <td style="text-align:center;">任意</td></tr></tbody></table> <div class="custom-block tip"><p class="custom-block-title">TIP</p> <p><code>Table</code>组件和下方的<code>baTable</code>类是搭配使用的，<code>baTable</code>类为表格提供数据，并可以响应表格组件的各种事件，<code>Table</code>组件的使用示例，也请参考下方<code>baTable</code>类的示例。</p></div> <h2 id="batable-类"><a href="#batable-类" class="header-anchor">#</a> baTable 类</h2> <p>此类代码位于：<code>\src\utils\baTable.ts</code>，我们在类里面封装好了一个表格应有的<code>属性</code>和大量<code>方法</code>，可以直接<code>new baTable</code>使用（推荐），或者建立新类继承<code>baTable</code>重写之后再使用（可高度自定义，重写示例：<code>src\views\backend\security\sensitiveData\index.ts</code>）。</p> <div class="custom-block tip"><p class="custom-block-title">TIP</p> <p>在<code>index.vue</code>文件<code>new baTable()</code>，并将实例<code>provide</code>给上下文，然后，利用它，你就可以在上下文任何组件，任何时候改变表格所有参数数据（该实例的所有属性均具备响应性），或执行任何方法，只要你代码的逻辑能实现你的需求。</p></div> <h4 id="使用示例"><a href="#使用示例" class="header-anchor">#</a> 使用示例</h4> <p>以下为使用示例，正常情况下仅需少许代码即可实现表格，<code>baTable</code>类支持的属性和方法非常多，在<a href="/senior/web/baTable.html#表格所有可用属性">表格所有可用属性</a>有介绍，但我们更推荐您直接查阅<code>src\utils\baTable.ts</code>文件代码（有注释，不知道有哪些属性可用时，可直接查看<code>ts</code>的类型定义）</p> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
    <span class="token comment">&lt;!-- 可以直接在标签上使用 el-table的属性和事件 --&gt;</span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Table</span> <span class="token attr-name">ref</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>tableRef<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#columnPrepend</span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-table-column</span> <span class="token attr-name">prop</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>prepend<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>第一个列<span class="token punctuation">&quot;</span></span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>180<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>

        <span class="token comment">&lt;!-- baTableClass 实例中编程式定义的表格列会渲染在此处 --&gt;</span>
        
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#columnAppend</span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-table-column</span> <span class="token attr-name">prop</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>append<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>最后一个列<span class="token punctuation">&quot;</span></span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>180<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Table</span><span class="token punctuation">&gt;</span></span>

    <span class="token comment">&lt;!-- 这里正常还需引入一个表单组件，以供表格打开表单等 --&gt;</span>
    <span class="token comment">&lt;!-- 请参考任意后台页面的popupForm.vue组件，比如：\src\views\backend\user\rule\popupForm.vue --&gt;</span>
    <span class="token comment">&lt;!-- &lt;PopupForm /&gt; --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">setup</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>ts<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">import</span> Table <span class="token keyword">from</span> <span class="token string">'/@/components/table/index.vue'</span> <span class="token comment">// 导入 Table 组件</span>
<span class="token keyword">import</span> baTableClass <span class="token keyword">from</span> <span class="token string">'/@/utils/baTable'</span> <span class="token comment">// 导入 baTable 类</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> baTableApi <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'/@/api/common'</span> <span class="token comment">// 导入表格api方法生成器</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> defaultOptButtons <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'/@/components/table'</span> <span class="token comment">// 导入默认表格操作按钮数据:拖拽排序、编辑、删除按钮</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> userUser <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'/@/api/controllerUrls'</span> <span class="token comment">// 导入user管理的控制器Url：/index.php/admin/user.user/</span>

<span class="token keyword">const</span> tableRef <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token punctuation">)</span>

<span class="token comment">// 直接实例化 baTableClass 并传递各种参数</span>
<span class="token keyword">const</span> baTable <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">baTableClass</span><span class="token punctuation">(</span>
    <span class="token keyword">new</span> <span class="token class-name">baTableApi</span><span class="token punctuation">(</span>userUser<span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token comment">// 一个api类的实例，自动生成index、edit、del、等url和请求方法，提供控制器url即可</span>
    <span class="token comment">// 表格数据</span>
    <span class="token punctuation">{</span>
        <span class="token comment">// 表格列</span>
        <span class="token literal-property property">column</span><span class="token operator">:</span> <span class="token punctuation">[</span>
            <span class="token punctuation">{</span> <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'selection'</span><span class="token punctuation">,</span> <span class="token literal-property property">align</span><span class="token operator">:</span> <span class="token string">'center'</span><span class="token punctuation">,</span> <span class="token literal-property property">operator</span><span class="token operator">:</span> <span class="token boolean">false</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
            <span class="token punctuation">{</span> <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">'ID'</span><span class="token punctuation">,</span> <span class="token literal-property property">prop</span><span class="token operator">:</span> <span class="token string">'id'</span><span class="token punctuation">,</span> <span class="token literal-property property">align</span><span class="token operator">:</span> <span class="token string">'center'</span><span class="token punctuation">,</span> <span class="token literal-property property">operator</span><span class="token operator">:</span> <span class="token string">'LIKE'</span><span class="token punctuation">,</span> <span class="token literal-property property">operatorPlaceholder</span><span class="token operator">:</span> <span class="token string">'模糊查询'</span><span class="token punctuation">,</span> <span class="token literal-property property">width</span><span class="token operator">:</span> <span class="token number">70</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
            <span class="token punctuation">{</span> <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">'用户名'</span><span class="token punctuation">,</span> <span class="token literal-property property">prop</span><span class="token operator">:</span> <span class="token string">'username'</span><span class="token punctuation">,</span> <span class="token literal-property property">align</span><span class="token operator">:</span> <span class="token string">'center'</span><span class="token punctuation">,</span> <span class="token literal-property property">operator</span><span class="token operator">:</span> <span class="token string">'LIKE'</span><span class="token punctuation">,</span> <span class="token literal-property property">operatorPlaceholder</span><span class="token operator">:</span> <span class="token string">'模糊查询'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
            <span class="token comment">// ...</span>
            <span class="token punctuation">{</span>
                <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">'操作'</span><span class="token punctuation">,</span>
                <span class="token literal-property property">align</span><span class="token operator">:</span> <span class="token string">'center'</span><span class="token punctuation">,</span>
                <span class="token literal-property property">width</span><span class="token operator">:</span> <span class="token string">'100'</span><span class="token punctuation">,</span>
                <span class="token literal-property property">render</span><span class="token operator">:</span> <span class="token string">'buttons'</span><span class="token punctuation">,</span>
                <span class="token literal-property property">buttons</span><span class="token operator">:</span> <span class="token function">defaultOptButtons</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">'edit'</span><span class="token punctuation">,</span> <span class="token string">'delete'</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
                <span class="token literal-property property">operator</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
            <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token punctuation">]</span><span class="token punctuation">,</span>
        <span class="token comment">// 不允许双击编辑的列的 prop</span>
        <span class="token literal-property property">dblClickNotEditColumn</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token keyword">undefined</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
        <span class="token comment">// ...属性很多，请参考本文下方的表格全部可用属性，或翻阅源代码（有注释）</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">)</span>

<span class="token comment">// 实例化表格后，将 baTable 的实例提供给上下文</span>
<span class="token function">provide</span><span class="token punctuation">(</span><span class="token string">'baTable'</span><span class="token punctuation">,</span> baTable<span class="token punctuation">)</span>

<span class="token comment">// 相当于表格的onMounted，也可以在页面的onMounted时执行</span>
baTable<span class="token punctuation">.</span><span class="token function">mount</span><span class="token punctuation">(</span><span class="token punctuation">)</span>

<span class="token comment">// 获取数据，可以在页面的onMounted时执行，也可以比如先请求一个API，再执行获取数据</span>
baTable<span class="token punctuation">.</span><span class="token function">getIndex</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">!</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token comment">// 查看请求完毕（已获取到表格数据）</span>
    <span class="token comment">// baTable.initSort() // 初始化默认排序（如果需要）</span>
    <span class="token comment">// baTable.dragSort() // 初始化拖拽排序（如果需要）</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><h2 id="表格列"><a href="#表格列" class="header-anchor">#</a> 表格列</h2> <p>表格列数据是在实例化<code>baTable</code>时定义的，此处对列数据进行了介绍，但表格可用属性非常多，我们更推荐您直接查阅<code>src\utils\baTable.ts</code>文件代码（有注释，不知道有哪些属性可用时，可直接查看<code>ts</code>的类型定义）</p> <div class="custom-block tip"><p class="custom-block-title">TIP</p> <p>当编程式定义表格列无法满足您的需求时，请使用表格插槽，但其实编程式语法也能实现完全自由的自定义渲染</p></div> <div class="language-ts extra-class"><pre class="language-ts"><code><span class="token keyword">import</span> baTableClass <span class="token keyword">from</span> <span class="token string">'/@/utils/baTable'</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> baTableApi <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'/@/api/common'</span>

<span class="token keyword">const</span> baTable <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">baTableClass</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">baTableApi</span><span class="token punctuation">(</span><span class="token string">'table controller url'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
    <span class="token comment">// 表格列数据，其中 type、align、operator 本称为列属性，所有可用属性可在下方查阅</span>
    column<span class="token operator">:</span> <span class="token punctuation">[</span>
        <span class="token punctuation">{</span> type<span class="token operator">:</span> <span class="token string">'selection'</span><span class="token punctuation">,</span> align<span class="token operator">:</span> <span class="token string">'center'</span><span class="token punctuation">,</span> operator<span class="token operator">:</span> <span class="token boolean">false</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">]</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre></div><h4 id="表格列可用属性"><a href="#表格列可用属性" class="header-anchor">#</a> 表格列可用属性</h4> <p>同时支持 element plus <code>Table-column</code>组件的所有属性，请另外参考：<a href="https://element-plus.gitee.io/zh-CN/component/table.html#table-column-%E5%B1%9E%E6%80%A7" target="_blank" rel="noopener noreferrer">el官方文档<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <table><thead><tr><th style="text-align:center;">属性名</th> <th style="text-align:center;">注释</th> <th style="text-align:center;">可选值 or 示例值 or 数据类型</th></tr></thead> <tbody><tr><td style="text-align:center;">show</td> <td style="text-align:center;">是否显示此列</td> <td style="text-align:center;">boolean</td></tr> <tr><td style="text-align:center;">render</td> <td style="text-align:center;">渲染为</td> <td style="text-align:center;"><code>icon、switch、image、images、tag、tags、url、datetime、buttons、color、customTemplate、customRender</code></td></tr> <tr><td style="text-align:center;">buttons</td> <td style="text-align:center;">操作按钮数据</td> <td style="text-align:center;">按钮<code>render=buttons</code>时，此属性必填</td></tr> <tr><td style="text-align:center;">effect</td> <td style="text-align:center;"><code>render=tag</code>时<code>el-tag</code>组件的主题</td> <td style="text-align:center;"><code>plain、dark、light</code></td></tr> <tr><td style="text-align:center;">size</td> <td style="text-align:center;"><code>render=tag</code>时<code>el-tag</code>组件的<code>size</code></td> <td style="text-align:center;"><code>default、small、large</code></td></tr> <tr><td style="text-align:center;">custom</td> <td style="text-align:center;">自定义数据</td> <td style="text-align:center;">比如<code>render=tag</code>时,可以指定不同值时的<code>Tag</code>的<code>Type</code>属性 { open: 'success', close: 'info' }</td></tr> <tr><td style="text-align:center;">customTemplate</td> <td style="text-align:center;">谨慎使用，自定义渲染模板，方法可返回<code>html</code>内容，请确保返回内容是<code>xss</code>安全的</td> <td style="text-align:center;">请结合<code>render=customTemplate</code>使用，可<a href="/senior/web/baTable.html#自定义单元格渲染">参考代码片段</a></td></tr> <tr><td style="text-align:center;">customRender</td> <td style="text-align:center;">完全自定义渲染能力</td> <td style="text-align:center;">请参考<a href="/senior/web/baTable.html#方案三-完全自定义渲染">完全自定义渲染</a></td></tr> <tr><td style="text-align:center;">target</td> <td style="text-align:center;"><code>render=url</code>时，链接的打开方式</td> <td style="text-align:center;"><code>_blank、_self</code></td></tr> <tr><td style="text-align:center;">click</td> <td style="text-align:center;"><code>render=url</code>时的点击事件</td> <td style="text-align:center;"><code>(row: TableRow, value: string, field: TableColumn) =&gt; void</code></td></tr> <tr><td style="text-align:center;">timeFormat</td> <td style="text-align:center;"><code>render=datetime</code>时的格式化方式</td> <td style="text-align:center;">字母可以自由组合:y=年,m=月,d=日,h=时,M=分,s=秒</td></tr> <tr><td style="text-align:center;">default</td> <td style="text-align:center;">默认值</td> <td style="text-align:center;">any</td></tr> <tr><td style="text-align:center;">replaceValue</td> <td style="text-align:center;">值替换数据，通常用于<code>render=tag</code></td> <td style="text-align:center;">{open: '开', close: '关'}</td></tr> <tr><td style="text-align:center;">renderFormatter</td> <td style="text-align:center;">使用了任意的<code>render</code>时，可在渲染前对字段值进行预处理的方法，请返回新值</td> <td style="text-align:center;"><a href="/senior/web/baTable.html#单元格渲染前格式化">参考代码片段</a></td></tr> <tr><td style="text-align:center;">operator</td> <td style="text-align:center;">通用/公共搜索操作符</td> <td style="text-align:center;"><code>false(关闭本字段公共搜索)、=、&lt;&gt;、&gt;、&gt;=、&lt;、&lt;=、LIKE、NOT LIKE、IN、NOT IN、RANGE、NOT RANGE、NULL、NOT NULL、FIND_IN_SET</code></td></tr> <tr><td style="text-align:center;">operatorPlaceholder</td> <td style="text-align:center;">通用搜索框的placeholder</td> <td style="text-align:center;">string</td></tr> <tr><td style="text-align:center;">comSearchRender</td> <td style="text-align:center;">公共搜索渲染方式:上方的<code>render=tag、switch</code>时公共搜索也会渲染为下拉，数字会渲染为范围筛选，时间渲染为时间选择器等</td> <td style="text-align:center;"><code>remoteSelect、select</code></td></tr> <tr><td style="text-align:center;">comSearchCustomRender</td> <td style="text-align:center;">公共搜索自定义渲染</td> <td style="text-align:center;">请参考<a href="/senior/web/baTable.html#完全自定义公共搜索的渲染">公共搜索自定义渲染</a></td></tr> <tr><td style="text-align:center;">remote</td> <td style="text-align:center;">远程属性，目前只用于<code>comSearchRender=remoteSelect</code></td> <td style="text-align:center;">可设置<code>remoteSelect</code>组件的远程参数，参考<a href="/senior/web/baTable.html#表格公共搜索">表格公共搜索</a></td></tr></tbody></table> <h2 id="自定义单元格渲染"><a href="#自定义单元格渲染" class="header-anchor">#</a> 自定义单元格渲染</h2> <p>我们预设了一系列的单元格渲染方式<code>image、switch、tag...</code>，若它们不能满足您的需求，我们提供了另外三种方案，最终方案实现了完全的自定义渲染能力。</p> <h4 id="方案一-在渲染前格式化数据"><a href="#方案一-在渲染前格式化数据" class="header-anchor">#</a> 方案一：在渲染前格式化数据</h4> <p>在您使用<strong>预设</strong>的单元格渲染方案时<code>icon|switch|image|tag...</code>，可以在渲染前，通过函数对单元格值进行一次处理：</p> <div class="language-ts extra-class"><pre class="language-ts"><code><span class="token keyword">const</span> baTable <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">baTableClass</span><span class="token punctuation">(</span>
    <span class="token keyword">new</span> <span class="token class-name">baTableApi</span><span class="token punctuation">(</span>authAdmin<span class="token punctuation">)</span><span class="token punctuation">,</span>
    <span class="token punctuation">{</span>
        column<span class="token operator">:</span> <span class="token punctuation">[</span>
            <span class="token punctuation">{</span> label<span class="token operator">:</span> <span class="token string">'id'</span><span class="token punctuation">,</span> prop<span class="token operator">:</span> <span class="token string">'id'</span><span class="token punctuation">,</span> render<span class="token operator">:</span> <span class="token string">'tags'</span><span class="token punctuation">,</span> <span class="token function-variable function">renderFormatter</span><span class="token operator">:</span> <span class="token punctuation">(</span>row<span class="token operator">:</span> TableRow<span class="token punctuation">,</span> field<span class="token operator">:</span> TableColumn<span class="token punctuation">,</span> value<span class="token operator">:</span> <span class="token builtin">any</span><span class="token punctuation">,</span> column<span class="token operator">:</span> TableColumnCtx<span class="token operator">&lt;</span>TableRow<span class="token operator">&gt;</span><span class="token punctuation">,</span> index<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
                <span class="token keyword">return</span> value <span class="token operator">+</span> <span class="token string">' - 为该列所有值，加了个后缀'</span><span class="token punctuation">;</span>
            <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token punctuation">]</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">)</span>
</code></pre></div><h4 id="方案二-自定义渲染模板-返回html-不支持使用组件"><a href="#方案二-自定义渲染模板-返回html-不支持使用组件" class="header-anchor">#</a> 方案二：自定义渲染模板（返回Html，不支持使用组件）</h4> <p>若预设的所有单元格渲染方案均不能满足您的需要，您可以参考以下示例，自定义渲染单元格</p> <div class="language-ts extra-class"><pre class="language-ts"><code><span class="token keyword">const</span> baTable <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">baTableClass</span><span class="token punctuation">(</span>
    <span class="token keyword">new</span> <span class="token class-name">baTableApi</span><span class="token punctuation">(</span>authAdmin<span class="token punctuation">)</span><span class="token punctuation">,</span>
    <span class="token punctuation">{</span>
        column<span class="token operator">:</span> <span class="token punctuation">[</span>
            <span class="token punctuation">{</span> label<span class="token operator">:</span> <span class="token string">'id'</span><span class="token punctuation">,</span> prop<span class="token operator">:</span> <span class="token string">'id'</span><span class="token punctuation">,</span> render<span class="token operator">:</span> <span class="token string">'customTemplate'</span><span class="token punctuation">,</span> <span class="token function-variable function">customTemplate</span><span class="token operator">:</span> <span class="token punctuation">(</span>row<span class="token operator">:</span> TableRow<span class="token punctuation">,</span> field<span class="token operator">:</span> TableColumn<span class="token punctuation">,</span> value<span class="token operator">:</span> <span class="token builtin">any</span><span class="token punctuation">,</span> column<span class="token operator">:</span> TableColumnCtx<span class="token operator">&lt;</span>TableRow<span class="token operator">&gt;</span><span class="token punctuation">,</span> index<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
                <span class="token keyword">return</span> <span class="token string">'&lt;b&gt;'</span> <span class="token operator">+</span> value <span class="token operator">+</span> <span class="token string">'&lt;/b&gt;'</span><span class="token punctuation">;</span>
            <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token punctuation">]</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">)</span>
</code></pre></div><div class="custom-block warning"><p class="custom-block-title">WARNING</p> <p>但是，<code>customTemplate</code>可以直接渲染<code>HTML</code>的同时，也带来了安全隐患，请确保该函数返回的内容是<code>xss</code>安全的；比如您想要自定义渲染<code>username</code>字段，那么请确保该字段永远不会被用户输入html代码。</p></div> <h4 id="方案三-完全自定义渲染"><a href="#方案三-完全自定义渲染" class="header-anchor">#</a> 方案三：完全自定义渲染</h4> <h5 id="写法一"><a href="#写法一" class="header-anchor">#</a> 写法一</h5> <div class="language-ts extra-class"><pre class="language-ts"><code><span class="token comment">// idFieldRender.vue 是为渲染此单元格专门建立的单文件组件</span>
<span class="token keyword">import</span> IdFieldRender <span class="token keyword">from</span> <span class="token string">'./idFieldRender.vue'</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> markRaw <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'vue'</span>

<span class="token keyword">const</span> baTable <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">baTableClass</span><span class="token punctuation">(</span>
    <span class="token keyword">new</span> <span class="token class-name">baTableApi</span><span class="token punctuation">(</span>authAdmin<span class="token punctuation">)</span><span class="token punctuation">,</span>
    <span class="token punctuation">{</span>
        <span class="token comment">// id 字段将使用 IdFieldRender 组件进行渲染</span>
        column<span class="token operator">:</span> <span class="token punctuation">[</span>
            <span class="token punctuation">{</span> label<span class="token operator">:</span> <span class="token string">'id'</span><span class="token punctuation">,</span> prop<span class="token operator">:</span> <span class="token string">'id'</span><span class="token punctuation">,</span> render<span class="token operator">:</span> <span class="token string">'customRender'</span><span class="token punctuation">,</span> customRender<span class="token operator">:</span> <span class="token function">markRaw</span><span class="token punctuation">(</span>IdFieldRender<span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token punctuation">]</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">)</span>
</code></pre></div><div class="language-vue extra-class"><pre class="language-vue"><code><span class="token comment">&lt;!-- ./idFieldRender.vue 文件 --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span>
        <span class="token comment">&lt;!-- 自定义 --&gt;</span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">setup</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>ts<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
<span class="token comment">// 自定义</span>

<span class="token comment">// BuildAdmin将自动为此组件传递五个Props</span>
<span class="token keyword">interface</span> <span class="token class-name">Props</span> <span class="token punctuation">{</span>
    <span class="token literal-property property">renderValue</span><span class="token operator">:</span> any <span class="token comment">// 单元格值</span>
    <span class="token literal-property property">renderRow</span><span class="token operator">:</span> TableRow <span class="token comment">// 当前行数据</span>
    <span class="token literal-property property">renderField</span><span class="token operator">:</span> TableColumn <span class="token comment">// 当前列数据</span>
    <span class="token literal-property property">renderColumn</span><span class="token operator">:</span> TableColumnCtx<span class="token operator">&lt;</span>TableRow<span class="token operator">&gt;</span> <span class="token comment">// 当前列上下文数据</span>
    <span class="token literal-property property">renderIndex</span><span class="token operator">:</span> number <span class="token comment">// 当前行号</span>
<span class="token punctuation">}</span>
<span class="token keyword">const</span> props <span class="token operator">=</span> defineProps<span class="token operator">&lt;</span>Props<span class="token operator">&gt;</span><span class="token punctuation">(</span><span class="token punctuation">)</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>props<span class="token punctuation">.</span>renderValue<span class="token punctuation">,</span> props<span class="token punctuation">.</span>renderRow<span class="token punctuation">,</span> props<span class="token punctuation">.</span>renderField<span class="token punctuation">,</span> props<span class="token punctuation">.</span>renderColumn<span class="token punctuation">,</span> props<span class="token punctuation">.</span>renderIndex<span class="token punctuation">)</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span> <span class="token attr-name">scoped</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>scss<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css">
// 自定义
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><h5 id="写法二-无需建立新文件-但写法受限"><a href="#写法二-无需建立新文件-但写法受限" class="header-anchor">#</a> 写法二（无需建立新文件，但写法受限）</h5> <div class="language-ts extra-class"><pre class="language-ts"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> h<span class="token punctuation">,</span> markRaw<span class="token punctuation">,</span> resolveComponent <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'vue'</span>

<span class="token keyword">const</span> renderId <span class="token operator">=</span> <span class="token punctuation">{</span>
    <span class="token function">render</span><span class="token punctuation">(</span>context<span class="token operator">:</span> TableRenderPublicInstance<span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token comment">// context.$attrs 拥有五个属性，分别是:renderValue=单元格值,renderRow=当前行数据,renderField=当前列数据,renderColumn=当前列上下文数据,renderIndex=当前行号</span>
        <span class="token builtin">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>context<span class="token punctuation">.</span>$attrs<span class="token punctuation">.</span>renderRow<span class="token punctuation">,</span> context<span class="token punctuation">.</span>$attrs<span class="token punctuation">.</span>renderField<span class="token punctuation">,</span> context<span class="token punctuation">.</span>$attrs<span class="token punctuation">.</span>renderValue<span class="token punctuation">,</span> context<span class="token punctuation">.</span>$attrs<span class="token punctuation">.</span>renderColumn<span class="token punctuation">,</span> context<span class="token punctuation">.</span>$attrs<span class="token punctuation">.</span>renderIndex<span class="token punctuation">)</span>
        
        <span class="token comment">// 使用原生元素渲染，如`div、h1、a`等，以下演示了将 单元格值 直接通过h1标签进行渲染</span>
        <span class="token keyword">return</span> <span class="token function">h</span><span class="token punctuation">(</span><span class="token string">'h1'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token keyword">class</span><span class="token operator">:</span> <span class="token string">'id-h1'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> context<span class="token punctuation">.</span>$attrs<span class="token punctuation">.</span>renderValue<span class="token punctuation">)</span>

        <span class="token comment">// 使用vue组件定义进行渲染（导入的组件）</span>
        <span class="token keyword">return</span> <span class="token function">h</span><span class="token punctuation">(</span>Foo<span class="token punctuation">,</span> <span class="token punctuation">{</span><span class="token function-variable function">onClick</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token punctuation">,</span> context<span class="token punctuation">.</span>$attrs<span class="token punctuation">.</span>renderValue<span class="token punctuation">)</span>

        <span class="token comment">// 使用vue组件定义进行渲染（全局注册的组件）</span>
        <span class="token keyword">return</span> <span class="token function">h</span><span class="token punctuation">(</span><span class="token function">resolveComponent</span><span class="token punctuation">(</span><span class="token string">'el-xxx'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> context<span class="token punctuation">.</span>$attrs<span class="token punctuation">.</span>renderValue<span class="token punctuation">)</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span>

<span class="token keyword">const</span> baTable <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">baTableClass</span><span class="token punctuation">(</span>
    <span class="token keyword">new</span> <span class="token class-name">baTableApi</span><span class="token punctuation">(</span>authAdmin<span class="token punctuation">)</span><span class="token punctuation">,</span>
    <span class="token punctuation">{</span>
        <span class="token comment">// id 字段将使用渲染函数进行渲染</span>
        column<span class="token operator">:</span> <span class="token punctuation">[</span>
            <span class="token punctuation">{</span> label<span class="token operator">:</span> <span class="token string">'id'</span><span class="token punctuation">,</span> prop<span class="token operator">:</span> <span class="token string">'id'</span><span class="token punctuation">,</span> render<span class="token operator">:</span> <span class="token string">'customRender'</span><span class="token punctuation">,</span> customRender<span class="token operator">:</span> <span class="token function">markRaw</span><span class="token punctuation">(</span>renderId<span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token punctuation">]</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">)</span>
</code></pre></div><h2 id="自定义表格顶部按钮"><a href="#自定义表格顶部按钮" class="header-anchor">#</a> 自定义表格顶部按钮</h2> <p>有时您需要自定义表格顶部的按钮，请直接<a href="/senior/web/baTable.html#表格顶部菜单示例代码">点击此处查看示例代码</a>，或者您可以参考数据安全管理-&gt;数据回收站，我们在该管理功能内，通过插槽自定义了一个表格顶部的<code>还原</code>按钮（代码示例更完整）。</p> <h2 id="自定义表格行侧边按钮"><a href="#自定义表格行侧边按钮" class="header-anchor">#</a> 自定义表格行侧边按钮</h2> <p>有时您需要自定义表格行侧边的按钮，请参考下方示例，您也可以参考数据安全管理-&gt;数据回收站，我们在该管理功能内，实例化<code>baTable</code>时定义了一个额外的表格侧边确认还原按钮（代码示例更完整，并实现了双击单元格打开自定义的详情弹窗）。</p> <div class="language-ts extra-class"><pre class="language-ts"><code><span class="token keyword">import</span> baTableClass <span class="token keyword">from</span> <span class="token string">'/@/utils/baTable'</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> defaultOptButtons <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'/@/components/table'</span>

<span class="token comment">// defaultOptButtons 函数返回公共按钮数据（OptButton[]）</span>
<span class="token keyword">let</span> optBtn <span class="token operator">=</span> <span class="token function">defaultOptButtons</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">'edit'</span><span class="token punctuation">,</span> <span class="token string">'delete'</span><span class="token punctuation">]</span><span class="token punctuation">)</span>
<span class="token comment">// 给第一个按钮加上点击事件</span>
optBtn<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function-variable function">click</span> <span class="token operator">=</span> <span class="token punctuation">(</span>row<span class="token operator">:</span> TableRow<span class="token punctuation">,</span> field<span class="token operator">:</span> TableColumn<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token builtin">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'点击了按钮'</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>

<span class="token comment">// 自定义一个新的按钮</span>
<span class="token keyword">let</span> newButton<span class="token operator">:</span> OptButton<span class="token punctuation">[</span><span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token punctuation">[</span>
    <span class="token punctuation">{</span>
        <span class="token comment">// 渲染方式:tipButton=带tip的按钮,confirmButton=带确认框的按钮,moveButton=移动按钮</span>
        render<span class="token operator">:</span> <span class="token string">'tipButton'</span><span class="token punctuation">,</span>
        <span class="token comment">// 按钮名称</span>
        name<span class="token operator">:</span> <span class="token string">'info'</span><span class="token punctuation">,</span>
        <span class="token comment">// 鼠标放置时的 title 提示</span>
        title<span class="token operator">:</span> <span class="token string">'详情'</span><span class="token punctuation">,</span>
        <span class="token comment">// 直接在按钮内显示的文字，title 有值时可为空</span>
        text<span class="token operator">:</span> <span class="token string">'详情'</span><span class="token punctuation">,</span>
        <span class="token comment">// 按钮类型，请参考 element plus 的按钮类型</span>
        type<span class="token operator">:</span> <span class="token string">'primary'</span><span class="token punctuation">,</span>
        <span class="token comment">// 按钮 icon</span>
        icon<span class="token operator">:</span> <span class="token string">'fa fa-search-plus'</span><span class="token punctuation">,</span>
        <span class="token keyword">class</span><span class="token operator">:</span> <span class="token string">'table-row-info'</span><span class="token punctuation">,</span>
        <span class="token comment">// tipButton 禁用 tip</span>
        disabledTip<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
        <span class="token comment">// 自定义点击事件</span>
        <span class="token function-variable function">click</span><span class="token operator">:</span> <span class="token punctuation">(</span>row<span class="token operator">:</span> TableRow<span class="token punctuation">,</span> field<span class="token operator">:</span> TableColumn<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token comment">// 按钮是否显示，请返回布尔值</span>
        <span class="token function-variable function">display</span><span class="token operator">:</span> <span class="token punctuation">(</span>row<span class="token operator">:</span> TableRow<span class="token punctuation">,</span> field<span class="token operator">:</span> TableColumn<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
            <span class="token keyword">return</span> <span class="token boolean">true</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token comment">// 按钮是否禁用，请返回布尔值</span>
        <span class="token function-variable function">disabled</span><span class="token operator">:</span> <span class="token punctuation">(</span>row<span class="token operator">:</span> TableRow<span class="token punctuation">,</span> field<span class="token operator">:</span> TableColumn<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
            <span class="token keyword">return</span> <span class="token boolean">false</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token comment">// 自定义el-button属性</span>
        attr<span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">]</span>

<span class="token comment">// 新按钮合入到默认的按钮数组</span>
optBtn <span class="token operator">=</span> newButton<span class="token punctuation">.</span><span class="token function">concat</span><span class="token punctuation">(</span>optBtn<span class="token punctuation">)</span>

<span class="token comment">// 实例化 baTable</span>
<span class="token keyword">const</span> baTable <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">baTableClass</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">baTableApi</span><span class="token punctuation">(</span><span class="token string">'table controller url'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
    <span class="token comment">// 表格列数据</span>
    column<span class="token operator">:</span> <span class="token punctuation">[</span>
        <span class="token punctuation">{</span> type<span class="token operator">:</span> <span class="token string">'selection'</span><span class="token punctuation">,</span> align<span class="token operator">:</span> <span class="token string">'center'</span><span class="token punctuation">,</span> operator<span class="token operator">:</span> <span class="token boolean">false</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token punctuation">{</span>
            label<span class="token operator">:</span> <span class="token string">'操作'</span><span class="token punctuation">,</span>
            align<span class="token operator">:</span> <span class="token string">'center'</span><span class="token punctuation">,</span>
            width<span class="token operator">:</span> <span class="token number">120</span><span class="token punctuation">,</span>
            render<span class="token operator">:</span> <span class="token string">'buttons'</span><span class="token punctuation">,</span>
            <span class="token comment">// 表格列，渲染为 buttons，按钮数据为上面组装好的 optBtn</span>
            buttons<span class="token operator">:</span> optBtn<span class="token punctuation">,</span>
            operator<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>

<span class="token function">provide</span><span class="token punctuation">(</span><span class="token string">'baTable'</span><span class="token punctuation">,</span> baTable<span class="token punctuation">)</span>
</code></pre></div><h2 id="深度使用表格-重要"><a href="#深度使用表格-重要" class="header-anchor">#</a> 深度使用表格（重要）</h2> <h4 id="随意设置表格属性参数"><a href="#随意设置表格属性参数" class="header-anchor">#</a> 随意设置表格属性参数</h4> <p>表格的参数属性，在代码任何地方，都可以进行更改，比如：</p> <div class="language-ts extra-class"><pre class="language-ts"><code><span class="token comment">// 您可以先设置好一些表格属性，再执行“查看”请求，表格的所有可用属性，在本文下方可以寻找到，您也可以直接阅读源代码</span>
<span class="token keyword">const</span> <span class="token function-variable function">example1</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    baTable<span class="token punctuation">.</span>table<span class="token punctuation">.</span>filter<span class="token punctuation">.</span>limit <span class="token operator">=</span> <span class="token number">20</span>
    baTable<span class="token punctuation">.</span>table<span class="token punctuation">.</span>filter<span class="token punctuation">.</span>page <span class="token operator">=</span> <span class="token number">2</span>
    baTable<span class="token punctuation">.</span>table<span class="token punctuation">.</span>filter<span class="token operator">!</span><span class="token punctuation">.</span>search <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>field<span class="token operator">:</span><span class="token string">'status'</span><span class="token punctuation">,</span>val<span class="token operator">:</span><span class="token string">'1'</span><span class="token punctuation">,</span>operator<span class="token operator">:</span><span class="token string">'='</span><span class="token punctuation">,</span>render<span class="token operator">:</span><span class="token string">'tags'</span><span class="token punctuation">}</span><span class="token punctuation">]</span>
    baTable<span class="token punctuation">.</span><span class="token function">getIndex</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
</code></pre></div><div class="language-ts extra-class"><pre class="language-ts"><code><span class="token comment">// 数据加载完成后打开公共搜索</span>
baTable<span class="token punctuation">.</span><span class="token function">getIndex</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">?.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    baTable<span class="token punctuation">.</span>table<span class="token punctuation">.</span>showComSearch <span class="token operator">=</span> <span class="token boolean">true</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre></div><h4 id="自动获取表格筛选条件"><a href="#自动获取表格筛选条件" class="header-anchor">#</a> 自动获取表格筛选条件</h4> <p>有时您需要带着一些筛选条件跳转到表格，并获取筛选后的数据，您可以直接参考会员管理-&gt;编辑会员资料-&gt;调整余额；我们在跳转到余额日志管理时，携带了<code>user_id</code>参数，该参数由于和表格字段对应，所以会自动获取到并作为公共搜索的筛选条件。</p> <div class="language-ts extra-class"><pre class="language-ts"><code><span class="token keyword">import</span> router <span class="token keyword">from</span> <span class="token string">'/@/router/index'</span>

<span class="token comment">// 跳转到 user/moneyLog 页面，并携带 user_id 参数</span>
router<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    name<span class="token operator">:</span> <span class="token string">'user/moneyLog'</span><span class="token punctuation">,</span>
    query<span class="token operator">:</span> <span class="token punctuation">{</span>
        <span class="token comment">// user_id 字段存在于 user/moneyLog 页面表格的公共搜索中</span>
        <span class="token comment">// user/moneyLog 页面内的表格公共搜索，会自动获取下列参数，如果存在，则自动填充并搜索</span>
        user_id<span class="token operator">:</span> baTable<span class="token punctuation">.</span>form<span class="token punctuation">.</span>items<span class="token operator">!</span><span class="token punctuation">.</span>id<span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre></div><h2 id="表格所有可用属性"><a href="#表格所有可用属性" class="header-anchor">#</a> 表格所有可用属性</h2> <div class="language-ts extra-class"><pre class="language-ts"><code><span class="token keyword">const</span> baTable <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">baTableClass</span><span class="token punctuation">(</span>api<span class="token punctuation">,</span>
    <span class="token comment">// 表格参数</span>
    <span class="token punctuation">{</span>
        <span class="token comment">// 表格的ref</span>
        ref<span class="token operator">:</span> <span class="token keyword">undefined</span><span class="token punctuation">,</span>
        <span class="token comment">// 数据表主键字段</span>
        pk<span class="token operator">:</span> <span class="token string">'id'</span><span class="token punctuation">,</span>
        <span class="token comment">// 数据源，通过api自动加载</span>
        data<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
        <span class="token comment">// 路由remark（显示到表格顶部的文案）</span>
        remark<span class="token operator">:</span> <span class="token keyword">null</span><span class="token punctuation">,</span>
        <span class="token comment">// 表格加载状态</span>
        loading<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
        <span class="token comment">// 是否展开所有子项</span>
        expandAll<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
        <span class="token comment">// 选中项</span>
        selection<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
        <span class="token comment">// 不需要'双击编辑'的字段</span>
        dblClickNotEditColumn<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token keyword">undefined</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
        <span class="token comment">// 列数据</span>
        column<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
        <span class="token comment">// 数据总量</span>
        total<span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
        <span class="token comment">// 字段搜索,快速搜索,分页等数据</span>
        filter<span class="token operator">:</span> <span class="token punctuation">{</span>
            limit<span class="token operator">:</span> <span class="token number">10</span><span class="token punctuation">,</span>
            page<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
            order<span class="token operator">:</span> <span class="token string">'createtime'</span><span class="token punctuation">,</span>
            <span class="token comment">// 快速搜索，指定字段请在对应后端控制器内定义，默认为id</span>
            quick_search<span class="token operator">:</span> <span class="token string">'快速搜索关键词'</span><span class="token punctuation">,</span>
            <span class="token comment">// 公共搜索</span>
            search<span class="token operator">:</span> <span class="token punctuation">[</span>
                <span class="token punctuation">{</span>
                    <span class="token string-property property">'field'</span><span class="token operator">:</span> <span class="token string">'title'</span><span class="token punctuation">,</span>
                    <span class="token string-property property">'val'</span><span class="token operator">:</span> <span class="token string">'搜索标题字段'</span><span class="token punctuation">,</span>
                    <span class="token string-property property">'operator'</span><span class="token operator">:</span> <span class="token string">'LIKE'</span><span class="token punctuation">,</span>
                    <span class="token string-property property">'render'</span><span class="token operator">:</span> <span class="token string">'tags'</span><span class="token punctuation">,</span>
                <span class="token punctuation">}</span>
            <span class="token punctuation">]</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token comment">// 拖动排序限位字段:例如拖动行pid=1,那么拖动目的行pid也需要为1</span>
        dragSortLimitField<span class="token operator">:</span> <span class="token string">'pid'</span><span class="token punctuation">,</span>
        <span class="token comment">// 接受url的query参数并自动触发通用搜索</span>
        acceptQuery<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
        <span class="token comment">// 显示公共搜索</span>
        showComSearch<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
        <span class="token comment">// 扩展数据，预设的随意定义字段，整个baTable通常会暴露到上下文，定义后可在上下文中使用此属性</span>
        extend<span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token comment">// 表单参数</span>
    <span class="token punctuation">{</span>
        <span class="token comment">// 表单ref，new时无需传递</span>
        ref<span class="token operator">:</span> <span class="token keyword">undefined</span><span class="token punctuation">,</span>
        <span class="token comment">// 表单label宽度</span>
        labelWidth<span class="token operator">:</span> <span class="token number">160</span><span class="token punctuation">,</span>
        <span class="token comment">// 当前操作:add=添加,edit=编辑</span>
        operate<span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">,</span>
        <span class="token comment">// 被操作数据ID,支持批量编辑:add=[0],edit=[1,2,n]</span>
        operateIds<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
        <span class="token comment">// 表单数据，编辑/添加时的表单字段当前输入和预加载的数据</span>
        items<span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token comment">// 提交按钮状态</span>
        submitLoading<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
        <span class="token comment">// 默认表单数据(添加)</span>
        defaultItems<span class="token operator">:</span> <span class="token punctuation">{</span>
            username<span class="token operator">:</span> <span class="token string">'默认用户名'</span><span class="token punctuation">,</span>
            nickname<span class="token operator">:</span> <span class="token string">'默认昵称'</span><span class="token punctuation">,</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token comment">// 表单字段加载状态</span>
        loading<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
        <span class="token comment">// 扩展数据，预设的随意定义字段，整个baTable通常会暴露到上下文，定义后可在上下文中使用此属性</span>
        extend<span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span> 
    <span class="token comment">// 操作前置方法列表，返回false则取消原操作</span>
    <span class="token punctuation">{</span>
        <span class="token function-variable function">getIndex</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token builtin">boolean</span><span class="token punctuation">,</span><span class="token comment">// 查看前</span>
        <span class="token function-variable function">postDel</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">{</span>ids<span class="token punctuation">}</span><span class="token operator">:</span> <span class="token punctuation">{</span>ids<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token builtin">boolean</span><span class="token punctuation">,</span><span class="token comment">// 删除前</span>
        <span class="token function-variable function">requestEdit</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">{</span> id <span class="token punctuation">}</span><span class="token operator">:</span> <span class="token punctuation">{</span> id<span class="token operator">:</span> <span class="token builtin">string</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token builtin">boolean</span><span class="token punctuation">,</span><span class="token comment">// 编辑请求前</span>
        <span class="token function-variable function">onTableDblclick</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">{</span> row<span class="token punctuation">,</span> column <span class="token punctuation">}</span><span class="token operator">:</span> <span class="token punctuation">{</span> row<span class="token operator">:</span> TableRow<span class="token punctuation">;</span> column<span class="token operator">:</span> TableColumn <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token builtin">boolean</span><span class="token punctuation">,</span><span class="token comment">// 双击表格具体操作执行前</span>
        <span class="token function-variable function">toggleForm</span><span class="token operator">:</span><span class="token punctuation">(</span><span class="token punctuation">{</span> operate<span class="token punctuation">,</span> operateIds <span class="token punctuation">}</span><span class="token operator">:</span> <span class="token punctuation">{</span> operate<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span> operateIds<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">[</span><span class="token punctuation">]</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token builtin">boolean</span><span class="token punctuation">,</span><span class="token comment">// 表单切换前</span>
        <span class="token function-variable function">onSubmit</span><span class="token operator">:</span><span class="token punctuation">(</span><span class="token punctuation">{</span> formEl<span class="token punctuation">,</span> operate<span class="token punctuation">,</span> items <span class="token punctuation">}</span><span class="token operator">:</span> <span class="token punctuation">{</span> formEl<span class="token operator">:</span> FormInstance <span class="token operator">|</span> <span class="token keyword">undefined</span><span class="token punctuation">;</span> operate<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span> items<span class="token operator">:</span> anyObj <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token builtin">boolean</span><span class="token punctuation">,</span><span class="token comment">// 表单提交前</span>
        <span class="token function-variable function">onTableAction</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">{</span> event<span class="token punctuation">,</span> data <span class="token punctuation">}</span><span class="token operator">:</span> <span class="token punctuation">{</span> event<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">,</span> data<span class="token operator">:</span> anyObj <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token builtin">boolean</span><span class="token punctuation">,</span><span class="token comment">// 表格内事件响应前</span>
        <span class="token function-variable function">onTableHeaderAction</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">{</span> event<span class="token punctuation">,</span> data <span class="token punctuation">}</span><span class="token operator">:</span> <span class="token punctuation">{</span> event<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">,</span> data<span class="token operator">:</span> anyObj <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token builtin">boolean</span><span class="token punctuation">,</span><span class="token comment">// 表格顶部菜单响应前</span>
        <span class="token function-variable function">mount</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token builtin">boolean</span><span class="token punctuation">,</span><span class="token comment">// 初始化前</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token comment">// 操作后置方法列表，先执行表格本身的查看、删除、编辑、双击、等，再执行本处添加的后置操作</span>
    <span class="token punctuation">{</span>
        <span class="token function-variable function">getIndex</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">{</span> res <span class="token punctuation">}</span><span class="token operator">:</span> <span class="token punctuation">{</span> res<span class="token operator">:</span> ApiResponse <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">void</span><span class="token punctuation">,</span><span class="token comment">// 查看后</span>
        <span class="token function-variable function">postDel</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">{</span> res <span class="token punctuation">}</span><span class="token operator">:</span><span class="token punctuation">{</span> res<span class="token operator">:</span> ApiResponse <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">void</span><span class="token punctuation">,</span><span class="token comment">// 删除后</span>
        <span class="token function-variable function">requestEdit</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">{</span> res <span class="token punctuation">}</span><span class="token operator">:</span> <span class="token punctuation">{</span>res<span class="token operator">:</span> ApiResponse<span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">void</span><span class="token punctuation">,</span><span class="token comment">// 编辑请求后</span>
        <span class="token function-variable function">onTableDblclick</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">{</span> row<span class="token punctuation">,</span> column <span class="token punctuation">}</span><span class="token operator">:</span> <span class="token punctuation">{</span>row<span class="token operator">:</span> TableRow<span class="token punctuation">,</span> column<span class="token operator">:</span> TableColumn<span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">void</span><span class="token punctuation">,</span><span class="token comment">// 双击表格具体操作执行后</span>
        <span class="token function-variable function">toggleForm</span><span class="token operator">:</span><span class="token punctuation">(</span><span class="token punctuation">{</span> operate<span class="token punctuation">,</span> operateIds <span class="token punctuation">}</span><span class="token operator">:</span> <span class="token punctuation">{</span>operate<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">,</span> operateIds<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">void</span><span class="token punctuation">,</span><span class="token comment">// 表单切换后</span>
        <span class="token function-variable function">onSubmit</span><span class="token operator">:</span><span class="token punctuation">(</span><span class="token punctuation">{</span> res <span class="token punctuation">}</span><span class="token operator">:</span> <span class="token punctuation">{</span>res<span class="token operator">:</span> ApiResponse<span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">void</span><span class="token punctuation">,</span><span class="token comment">// 表单提交后</span>
        <span class="token function-variable function">onTableAction</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">{</span> event<span class="token punctuation">,</span> data <span class="token punctuation">}</span><span class="token operator">:</span> <span class="token punctuation">{</span> event<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">,</span> data<span class="token operator">:</span> anyObj <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">void</span><span class="token punctuation">,</span><span class="token comment">// 表格内事件响应后</span>
        <span class="token function-variable function">onTableHeaderAction</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">{</span> event<span class="token punctuation">,</span> data <span class="token punctuation">}</span><span class="token operator">:</span> <span class="token punctuation">{</span>event<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">,</span> data<span class="token operator">:</span> anyObj<span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">void</span><span class="token punctuation">,</span><span class="token comment">// 表格顶部菜单响应后</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">)</span>
</code></pre></div><h2 id="表格公共搜索"><a href="#表格公共搜索" class="header-anchor">#</a> 表格公共搜索</h2> <p>表格公共/通用搜索是在实例化<code>baTable</code>时定义的，表格列的<code>render、operator、comSearchRender</code>属性共同参与公共搜索框的渲染。<br>
而<code>comSearchRender</code>支持<code>remoteSelect、select、date、customRender</code>，详细使用方法请直接查看下方示例代码。</p> <table><thead><tr><th style="text-align:center;">render</th> <th style="text-align:center;">operator</th> <th style="text-align:center;">comSearchRender</th> <th style="text-align:center;">渲染方式</th></tr></thead> <tbody><tr><td style="text-align:center;">任意</td> <td style="text-align:center;">false</td> <td style="text-align:center;"></td> <td style="text-align:center;"><strong>不渲染</strong></td></tr> <tr><td style="text-align:center;">任意</td> <td style="text-align:center;"><code>RANGE、NOT RANGE</code></td> <td style="text-align:center;"></td> <td style="text-align:center;">生成两个输入框(A和B)，可输入<code>从A到B</code>的范围值</td></tr> <tr><td style="text-align:center;">任意</td> <td style="text-align:center;"><code>NULL、NOT NULL</code></td> <td style="text-align:center;"></td> <td style="text-align:center;">生成一个复现框，勾选则搜索值为<code>NULL、NOT NULL</code>的情况</td></tr> <tr><td style="text-align:center;">datetime</td> <td style="text-align:center;"><code>RANGE、NOT RANGE</code></td> <td style="text-align:center;"></td> <td style="text-align:center;">时间范围选择器</td></tr> <tr><td style="text-align:center;">datetime</td> <td style="text-align:center;"><code>=、&gt;、&lt;</code>等比较符号，请参考<a href="/senior/web/baTable.html#表格列">表格列</a>的<code>operator</code>属性</td> <td style="text-align:center;"></td> <td style="text-align:center;">时间选择器</td></tr> <tr><td style="text-align:center;">tag</td> <td style="text-align:center;"><code>=、&gt;、&lt;</code>等比较符号</td> <td style="text-align:center;"></td> <td style="text-align:center;">生成下拉框，下拉列表定义请参考<a href="/senior/web/baTable.html#表格列">表格列</a>的<code>replaceValue</code></td></tr> <tr><td style="text-align:center;">switch</td> <td style="text-align:center;">无需设定</td> <td style="text-align:center;"></td> <td style="text-align:center;">生成下拉框:<code>1=开,0=关</code>，也可以通过设置<a href="/senior/web/baTable.html#表格列">表格列</a>的<code>replaceValue</code>自定义值</td></tr> <tr><td style="text-align:center;">任意</td> <td style="text-align:center;"><a href="/senior/web/baTable.html#表格列">表格列</a>的其他<code>operator</code>属性</td> <td style="text-align:center;"></td> <td style="text-align:center;">生成普通字符串输入框</td></tr> <tr><td style="text-align:center;">任意</td> <td style="text-align:center;"><code>=、&gt;、&lt;</code>等比较符号</td> <td style="text-align:center;">remoteSelect</td> <td style="text-align:center;">远程下拉</td></tr> <tr><td style="text-align:center;">任意</td> <td style="text-align:center;"><code>=、&gt;、&lt;</code>等比较符号</td> <td style="text-align:center;">select</td> <td style="text-align:center;">下拉框</td></tr> <tr><td style="text-align:center;">任意</td> <td style="text-align:center;">无需设定，表内存储格式化好的日期字符串</td> <td style="text-align:center;">date</td> <td style="text-align:center;">日期选择器(纯日期无时间)</td></tr> <tr><td style="text-align:center;">datetime</td> <td style="text-align:center;"><code>RANGE、NOT RANGE</code></td> <td style="text-align:center;">date</td> <td style="text-align:center;">日期范围选择器(纯日期无时间)</td></tr> <tr><td style="text-align:center;">任意</td> <td style="text-align:center;">任意</td> <td style="text-align:center;">customRender</td> <td style="text-align:center;"><strong>自定义渲染组件</strong>，请参考下方示例</td></tr></tbody></table> <h4 id="公共搜索示例代码"><a href="#公共搜索示例代码" class="header-anchor">#</a> 公共搜索示例代码</h4> <div class="language-ts extra-class"><pre class="language-ts"><code><span class="token keyword">import</span> baTableClass <span class="token keyword">from</span> <span class="token string">'/@/utils/baTable'</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> baTableApi <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'/@/api/common'</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> userUser <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'/@/api/controllerUrls'</span>

<span class="token keyword">const</span> baTable <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">baTableClass</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">baTableApi</span><span class="token punctuation">(</span><span class="token string">'table controller url'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
    <span class="token comment">// 定义表格列数据、同时定义公共/通用搜索数据</span>
    column<span class="token operator">:</span> <span class="token punctuation">[</span>
        <span class="token comment">// 关闭这个字段的公共搜索</span>
        <span class="token punctuation">{</span> type<span class="token operator">:</span> <span class="token string">'selection'</span><span class="token punctuation">,</span> align<span class="token operator">:</span> <span class="token string">'center'</span><span class="token punctuation">,</span> operator<span class="token operator">:</span> <span class="token boolean">false</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token comment">// 此字段是模糊查找，并为公共搜索输入框设置了 placeholder</span>
        <span class="token punctuation">{</span> label<span class="token operator">:</span> <span class="token string">'ID'</span><span class="token punctuation">,</span> prop<span class="token operator">:</span> <span class="token string">'id'</span><span class="token punctuation">,</span> align<span class="token operator">:</span> <span class="token string">'center'</span><span class="token punctuation">,</span> operator<span class="token operator">:</span> <span class="token string">'LIKE'</span><span class="token punctuation">,</span> operatorPlaceholder<span class="token operator">:</span> <span class="token function">t</span><span class="token punctuation">(</span><span class="token string">'Fuzzy query'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> width<span class="token operator">:</span> <span class="token number">70</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token comment">// 此字段是图片，建议关闭公共搜索</span>
        <span class="token punctuation">{</span> label<span class="token operator">:</span> <span class="token string">'头像'</span><span class="token punctuation">,</span> prop<span class="token operator">:</span> <span class="token string">'avatar'</span><span class="token punctuation">,</span> align<span class="token operator">:</span> <span class="token string">'center'</span><span class="token punctuation">,</span> render<span class="token operator">:</span> <span class="token string">'image'</span><span class="token punctuation">,</span> operator<span class="token operator">:</span> <span class="token boolean">false</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token comment">// 此字段将生成一个下拉框选择进行搜索，拥有三个值</span>
        <span class="token punctuation">{</span>
            label<span class="token operator">:</span> <span class="token function">t</span><span class="token punctuation">(</span><span class="token string">'user.user.Gender'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
            prop<span class="token operator">:</span> <span class="token string">'gender'</span><span class="token punctuation">,</span>
            align<span class="token operator">:</span> <span class="token string">'center'</span><span class="token punctuation">,</span>
            render<span class="token operator">:</span> <span class="token string">'tag'</span><span class="token punctuation">,</span>
            replaceValue<span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token string-property property">'0'</span><span class="token operator">:</span> <span class="token function">t</span><span class="token punctuation">(</span><span class="token string">'unknown'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token string-property property">'1'</span><span class="token operator">:</span> <span class="token function">t</span><span class="token punctuation">(</span><span class="token string">'user.user.male'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token string-property property">'2'</span><span class="token operator">:</span> <span class="token function">t</span><span class="token punctuation">(</span><span class="token string">'user.user.female'</span><span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token comment">// 此字段将生成一个时间范围选择框，选择时间日期进行搜索</span>
        <span class="token punctuation">{</span> label<span class="token operator">:</span> <span class="token function">t</span><span class="token punctuation">(</span><span class="token string">'createtime'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> prop<span class="token operator">:</span> <span class="token string">'createtime'</span><span class="token punctuation">,</span> align<span class="token operator">:</span> <span class="token string">'center'</span><span class="token punctuation">,</span> render<span class="token operator">:</span> <span class="token string">'datetime'</span><span class="token punctuation">,</span> sortable<span class="token operator">:</span> <span class="token string">'custom'</span><span class="token punctuation">,</span> operator<span class="token operator">:</span> <span class="token string">'RANGE'</span><span class="token punctuation">,</span> width<span class="token operator">:</span> <span class="token number">160</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token comment">// 此字段将生成一个日期范围选择框，选择日期进行搜索（请注意渲染还是 datetime 若需自定义单元格渲染请参考`表格列`一节）</span>
        <span class="token punctuation">{</span> label<span class="token operator">:</span> <span class="token function">t</span><span class="token punctuation">(</span><span class="token string">'updatetime'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> prop<span class="token operator">:</span> <span class="token string">'updatetime'</span><span class="token punctuation">,</span> align<span class="token operator">:</span> <span class="token string">'center'</span><span class="token punctuation">,</span> render<span class="token operator">:</span> <span class="token string">'datetime'</span><span class="token punctuation">,</span> sortable<span class="token operator">:</span> <span class="token string">'custom'</span><span class="token punctuation">,</span> operator<span class="token operator">:</span> <span class="token string">'RANGE'</span><span class="token punctuation">,</span> width<span class="token operator">:</span> <span class="token number">160</span><span class="token punctuation">,</span> comSearchRender<span class="token operator">:</span> <span class="token string">'date'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token comment">// 另外一种在公共搜索渲染下拉框的办法</span>
        <span class="token punctuation">{</span>
            label<span class="token operator">:</span> <span class="token function">t</span><span class="token punctuation">(</span><span class="token string">'user.user.Gender'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
            prop<span class="token operator">:</span> <span class="token string">'gender'</span><span class="token punctuation">,</span>
            align<span class="token operator">:</span> <span class="token string">'center'</span><span class="token punctuation">,</span>
            comSearchRender<span class="token operator">:</span> <span class="token string">'select'</span><span class="token punctuation">,</span>
            replaceValue<span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token string-property property">'0'</span><span class="token operator">:</span> <span class="token function">t</span><span class="token punctuation">(</span><span class="token string">'unknown'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token string-property property">'1'</span><span class="token operator">:</span> <span class="token function">t</span><span class="token punctuation">(</span><span class="token string">'user.user.male'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token string-property property">'2'</span><span class="token operator">:</span> <span class="token function">t</span><span class="token punctuation">(</span><span class="token string">'user.user.female'</span><span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token comment">// 远程下拉选择框</span>
        <span class="token punctuation">{</span> label<span class="token operator">:</span> <span class="token string">'会员'</span><span class="token punctuation">,</span> prop<span class="token operator">:</span> <span class="token string">'user_id'</span><span class="token punctuation">,</span> comSearchRender<span class="token operator">:</span> <span class="token string">'remoteSelect'</span><span class="token punctuation">,</span> remote<span class="token operator">:</span> <span class="token punctuation">{</span>
            <span class="token comment">// 主键，下拉 value</span>
            pk<span class="token operator">:</span> <span class="token string">'id'</span><span class="token punctuation">,</span>
            <span class="token comment">// 字段，下拉 label</span>
            field<span class="token operator">:</span> <span class="token string">'username'</span><span class="token punctuation">,</span>
            <span class="token comment">// 远程接口URL</span>
            <span class="token comment">// 比如想要获取 user(会员) 表的数据，后台`会员管理`控制器URL为`/index.php/admin/user.user/index`</span>
            <span class="token comment">// 因为已经通过 CRUD 生成过`会员管理`功能，所以该URL地址可以从`/@/api/controllerUrls`导入使用，如下面的 userUser</span>
            <span class="token comment">// 该URL地址通常等于对应后台管理功能的`查看`操作请求的URL</span>
            remoteUrl<span class="token operator">:</span> userUser <span class="token operator">+</span> <span class="token string">'index'</span><span class="token punctuation">,</span>
            <span class="token comment">// 额外的请求参数</span>
            params<span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">]</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre></div><h4 id="完全自定义公共搜索的渲染"><a href="#完全自定义公共搜索的渲染" class="header-anchor">#</a> 完全自定义公共搜索的渲染</h4> <h5 id="方案一-使用自定义的函数或组件渲染"><a href="#方案一-使用自定义的函数或组件渲染" class="header-anchor">#</a> 方案一：使用自定义的函数或组件渲染</h5> <p>公共搜索的自定义渲染与表格单元格的自定义渲染类似，<a href="https://wonderful-code.gitee.io/senior/web/baTable.html#%E6%96%B9%E6%A1%88%E4%B8%89-%E5%AE%8C%E5%85%A8%E8%87%AA%E5%AE%9A%E4%B9%89%E6%B8%B2%E6%9F%93" target="_blank" rel="noopener noreferrer">请先阅读这里<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <div class="language-ts extra-class"><pre class="language-ts"><code><span class="token comment">// idFieldSearchRender.vue 是为渲染id列的公共搜索专门建立的单文件组件</span>
<span class="token keyword">import</span> IdFieldSearchRender <span class="token keyword">from</span> <span class="token string">'./idFieldSearchRender.vue'</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> markRaw <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'vue'</span>

<span class="token keyword">const</span> baTable <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">baTableClass</span><span class="token punctuation">(</span>
    <span class="token keyword">new</span> <span class="token class-name">baTableApi</span><span class="token punctuation">(</span>authAdmin<span class="token punctuation">)</span><span class="token punctuation">,</span>
    <span class="token punctuation">{</span>
        <span class="token comment">// id 字段的公共搜索将使用 IdFieldSearchRender 组件进行渲染</span>
        <span class="token comment">// 与单元格的完全自定义渲染只是属性名不同</span>
        column<span class="token operator">:</span> <span class="token punctuation">[</span>
            <span class="token punctuation">{</span> label<span class="token operator">:</span> <span class="token string">'id'</span><span class="token punctuation">,</span> prop<span class="token operator">:</span> <span class="token string">'id'</span><span class="token punctuation">,</span> comSearchRender<span class="token operator">:</span> <span class="token string">'customRender'</span><span class="token punctuation">,</span> comSearchCustomRender<span class="token operator">:</span> <span class="token function">markRaw</span><span class="token punctuation">(</span>IdFieldSearchRender<span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token punctuation">]</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">)</span>
</code></pre></div><h5 id="方案二-弃用表格自带的公共搜索"><a href="#方案二-弃用表格自带的公共搜索" class="header-anchor">#</a> 方案二：弃用表格自带的公共搜索</h5> <ul><li>请参考<a href="https://wonderful-code.gitee.io/senior/web/baTable.html#%E8%A1%A8%E6%A0%BC%E9%A1%B6%E9%83%A8%E8%8F%9C%E5%8D%95" target="_blank" rel="noopener noreferrer">表格顶部菜单<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>，禁用掉公共搜索</li> <li>完整实现一个自定义的公共搜索组件</li> <li>然后你可以通过<code>baTable.table.showComSearch</code>来判断您自定义公共搜索组件的显示隐藏状态</li></ul> <h2 id="batableapi-类"><a href="#batableapi-类" class="header-anchor">#</a> baTableApi 类</h2> <p>此类代码位于：<code>\src\api\common.ts</code>，它实现快速生成一个控制器的：增、删、改、查、排序的操作url和方法，提供控制器的url即可。此类通常与<code>baTable</code>类搭配使用，若需单独定义<code>api</code>方法，可以直接在<code>\src\api</code>目录下定义即可。</p> <h4 id="使用示例-2"><a href="#使用示例-2" class="header-anchor">#</a> 使用示例</h4> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">import</span> <span class="token punctuation">{</span> baTableApi <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'/@/api/common'</span> <span class="token comment">// 导入表格api方法生成器</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> userUser <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'/@/api/controllerUrls'</span> <span class="token comment">// 导入user管理的控制器Url，类似：/index.php/admin/user.user/</span>

<span class="token comment">// 请注意，baTableApi类的方法通常都是由baTable类来使用的，并不是在外部示例化一个 baTableApi 类使用，以下仅为方便读者理解它是什么</span>

<span class="token keyword">let</span> baApi <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">baTableApi</span><span class="token punctuation">(</span>userUser<span class="token punctuation">)</span>
baApi<span class="token punctuation">.</span><span class="token function">index</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token comment">// 请求查看，参数为筛选条件，具体使用请参考baTable类</span>
baApi<span class="token punctuation">.</span><span class="token function">edit</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token comment">// 请求编辑数据，参数为被编辑项id等</span>
baApi<span class="token punctuation">.</span><span class="token function">del</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token comment">// 请求删除，参数为被删除数据的ids</span>
<span class="token comment">// ...</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><h2 id="表格顶部菜单"><a href="#表格顶部菜单" class="header-anchor">#</a> 表格顶部菜单</h2> <p>菜单按钮可以自动根据当前路由进行<code>鉴权</code>，当前管理员无权限的按钮，则不会显示。</p> <h4 id="属性列表"><a href="#属性列表" class="header-anchor">#</a> 属性列表</h4> <table><thead><tr><th style="text-align:center;">属性名</th> <th>注释</th></tr></thead> <tbody><tr><td style="text-align:center;">buttons</td> <td>要显示的菜单按钮数组</td></tr> <tr><td style="text-align:center;">quick-search-placeholder</td> <td>快速搜索输入框的<code>placeholder</code></td></tr></tbody></table> <h4 id="插槽列表"><a href="#插槽列表" class="header-anchor">#</a> 插槽列表</h4> <table><thead><tr><th style="text-align:center;">插槽名</th> <th>注释</th></tr></thead> <tbody><tr><td style="text-align:center;">—</td> <td>此插槽内容将放置在组件内置的菜单按钮之后，可自定义表格顶部按钮等</td></tr></tbody></table> <h4 id="支持的菜单按钮"><a href="#支持的菜单按钮" class="header-anchor">#</a> 支持的菜单按钮</h4> <table><thead><tr><th style="text-align:center;">菜单按钮</th> <th>注释</th></tr></thead> <tbody><tr><td style="text-align:center;">refresh</td> <td>刷新按钮</td></tr> <tr><td style="text-align:center;">add</td> <td>添加</td></tr> <tr><td style="text-align:center;">edit</td> <td>编辑</td></tr> <tr><td style="text-align:center;">delete</td> <td>删除</td></tr> <tr><td style="text-align:center;">comSearch</td> <td>公共搜索</td></tr> <tr><td style="text-align:center;">quickSearch</td> <td>快速搜索</td></tr> <tr><td style="text-align:center;">columnDisplay</td> <td>字段显示状态</td></tr> <tr><td style="text-align:center;">unfold</td> <td>展开/折叠，与<code>baTable.table.expandAll</code>属性关联</td></tr></tbody></table> <h4 id="表格顶部菜单示例代码"><a href="#表格顶部菜单示例代码" class="header-anchor">#</a> 表格顶部菜单示例代码</h4> <p>src/views/backend/security/dataRecycleLog/index.vue 文件</p> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
    <span class="token comment">&lt;!-- buttons 属性定义了 TableHeader 本身支持的顶部按钮，仅需传递按钮名即可 --&gt;</span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>TableHeader</span>
        <span class="token attr-name">:buttons</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>['refresh', 'add', 'edit', 'delete', 'comSearch', 'quickSearch', 'columnDisplay', 'unfold']<span class="token punctuation">&quot;</span></span>
        <span class="token attr-name">:quick-search-placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>t('quick Search Placeholder', { fields: t('security.dataRecycleLog.Rule name') })<span class="token punctuation">&quot;</span></span>
    <span class="token punctuation">&gt;</span></span>
        <span class="token comment">&lt;!-- 可以在此处以插槽的方式设置一些自定义按钮 --&gt;</span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-button</span> <span class="token attr-name">v-blur</span> <span class="token attr-name">:disabled</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>baTable.table.selection!.length &gt; 0 ? false:true<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>table-header-operate<span class="token punctuation">&quot;</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>success<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Icon</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#ffffff<span class="token punctuation">&quot;</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>el-icon-RefreshRight<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>table-header-operate-text<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>还原<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-button</span><span class="token punctuation">&gt;</span></span>

    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>TableHeader</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">import</span> TableHeader <span class="token keyword">from</span> <span class="token string">'/@/components/table/header/index.vue'</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><h2 id="常见问题"><a href="#常见问题" class="header-anchor">#</a> 常见问题</h2> <h3 id="如何在一个页面渲染两个表格"><a href="#如何在一个页面渲染两个表格" class="header-anchor">#</a> 如何在一个页面渲染两个表格？</h3> <p>由于表格数据来自<code>baTable</code>实例，并且通过<code>provide</code>、<code>inject</code>将整个实例传递给组件上下文，所以，两个表格不能共处于一个<code>vue</code>文件中，您可以另外建立<code>vue</code>文件，在其中写好新的表格，然后导入使用即可。</p> <h3 id="如何禁用列的双击编辑功能"><a href="#如何禁用列的双击编辑功能" class="header-anchor">#</a> 如何禁用列的双击编辑功能</h3> <p>我们可以通过添加列的<code>prop</code>到<code>baTable</code>的<code>dblClickNotEditColumn数组</code>来禁用对应列的双击编辑功能，当我们想禁用全部列的双击编辑功能时只需要定义<code>dblClickNotEditColumn: ['all']</code>即可。</p></div> <footer class="page-edit"><div class="edit-link"><a href="https://gitee.com/wonderful-code/build-admin-doc/edit/master/docs/senior/web/baTable.md" target="_blank" rel="noopener noreferrer">点此帮助我们改善此页面</a> <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></div> <div class="last-updated"><span class="prefix">上次更新:</span> <span class="time">2023/2/24 18:47:31</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
      ←
      <a href="/senior/web/baInput.html" class="prev">
        输入组件（baInput）
      </a></span> <span class="next"><a href="/senior/web/terminal.html">
        WEB终端组件
      </a>
      →
    </span></p></div> </main></div><div class="global-ui"></div></div>
    <script src="/assets/js/app.26dfc26f.js" defer></script><script src="/assets/js/2.845fc4bd.js" defer></script><script src="/assets/js/71.9e222b70.js" defer></script>
  </body>
</html>
